import React, {Component} from 'react'
import Cover from 'components/common/cover'
import { observer } from 'mobx-react/custom'
import PostItem from 'components/home/postItem'
import PropTypes from 'prop-types'
import LoadMore from 'uxcore-load-more'

const Content = observer(({ vm }) => {
  if (!vm.data || vm.data.length === 0) {
    return <div />
  }
  return (
    <div>{vm.data.map((item, index) => {
      return <PostItem
        onClickItem={() => vm.handleComment(item.data)}
        onClickComment={() => vm.handleComment(item.data)}
        onClickLike={item.handleLike}
        onClickMore={() => vm.handleMore(item.data)}
        key={'postItem' + index} vm={item} />
    })}
    </div>
  )
})

const CollectionCover = observer(({ vm }) => {
  return (
    <Cover visible={vm.coverVisible}>
      <div onClick={vm.collect} className='collection'>{vm.collectType}</div>
      <div onClick={vm.handleHideCover} className='cancel'>取 消</div>
    </Cover>
  )
})

const DeleteCover = observer(({ vm }) => {
  return (
    <Cover visible={vm.coverVisible}>
      <div onClick={vm.delete} className='collection'>删除</div>
      <div onClick={vm.handleHideCover} className='cancel'>取 消</div>
    </Cover>
  )
})

const CancelCollectCover = observer(({ vm }) => {
  return (
    <Cover visible={vm.coverVisible}>
      <div onClick={vm.cancelCollect} className='collection'>取消收藏</div>
      <div onClick={vm.handleHideCover} className='cancel'>取 消</div>
    </Cover>
  )
})

@observer
export default class PostList extends Component {
  constructor (props) {
    super(props)
    this.vm = this.props.vm
  }
  render () {
    if (this.vm.pageInfo.status !== 'loading' && this.vm.data.length === 0) {
      return <div className='nothing-count'>暂无数据</div>
    }
    return (

      <div className='post-list'>
        {this.vm.coverType === 'collect' &&
          <CollectionCover vm={this.vm} />}
        {this.vm.coverType === 'delete' &&
          <DeleteCover vm={this.vm} />}
        {this.vm.coverType === 'cancelCollect' &&
          <CancelCollectCover vm={this.vm} />}
        <Content vm={this.vm} />
        {this.vm.pageInfo.status !== 'noMore' && this.vm.pageInfo.page !== 1 &&
          <LoadMore status={this.vm.pageInfo.status} trigger={['view', 'click']}
            noMoreText={'没有更多啦'}
            onLoadMore={this.vm.handleLoadMore} />}
      </div>
    )
  }
}

PostList.propTypes = {
  vm: PropTypes.object
}
